<template>
  <div id="home">
    <div class="left">
      <el-menu
        :default-active="activeMenu"
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        text-color="#fff"
        @open="handleOpen"
        @close="handleClose"
        router
      >
        <template v-for="menu in menus" :key="menu._id">
          <el-sub-menu v-if="menu.children && menu.children.length > 0" :index="menu.url">
            <template #title>
              <i :class="[{ 'active-icon': isActive(menu.url) }, menu.iconClass]"></i>
              <span :class="{ 'active-text': isActive(menu.url) }">{{ menu.name }}</span>
            </template>

            <el-menu-item
              v-for="child in menu.children"
              :key="child._id"
              :index="child.url"
              @click="handleSubMenuClick(child)"
            >
              <i :class="[{ 'active-icon': isActive(child.url) }, child.iconClass]"></i>
              <span :class="{ 'active-text': isActive(child.url) }">{{ child.name }}</span>
            </el-menu-item>
          </el-sub-menu>

          <el-menu-item v-else :index="menu.url" @click="handleMenuClick(menu)">
            <i :class="[{ 'active-icon': isActive(menu.url) }, menu.iconClass]"></i>
            <span :class="{ 'active-text': isActive(menu.url) }">{{ menu.name }}</span>
          </el-menu-item>
        </template>
      </el-menu>
    </div>

    <div class="right">
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'

// 从 localStorage 获取菜单数据并解析
const menus = ref(JSON.parse(localStorage.getItem('permissions_list')) || [])
const router = useRouter()
const route = useRoute()

// 默认激活的菜单项
const activeMenu = ref(route.path) // 使用当前路由的path作为默认激活项

// 监听路由变化，更新激活的菜单项
watch(
  () => route.path,
  (newPath) => {
    activeMenu.value = newPath
  }
)

// 判断当前路由是否是活动路由
const isActive = (url) => {
  return activeMenu.value === url
}

// 点击一级菜单时的处理逻辑
const handleMenuClick = (menu) => {
  router.push(menu.url) // 没有子菜单，直接跳转
}

// 点击子菜单时的处理逻辑
const handleSubMenuClick = (child) => {
  router.push(child.url) // 跳转子路由
}

// 打开菜单时的事件
const handleOpen = (key, keyPath) => {
  console.log('Opened menu:', key, keyPath)
}

// 关闭菜单时的事件
const handleClose = (key, keyPath) => {
  console.log('Closed menu:', key, keyPath)
}
</script>

<style scoped>
#home {
  display: flex;
  height: 100vh;
  font-family: 'Arial', sans-serif;
  background-color: #eaeaea; /* 设置整体背景颜色 */
  transition: background-color 0.3s ease;
}

.left {
  width: 250px;
  background: linear-gradient(180deg, #545c64 0%, #3e474d 100%);
  padding: 20px;
  box-shadow: 2px 0 15px rgba(0, 0, 0, 0.3); /* 加深阴影 */
  transition: width 0.3s ease;
}

.right {
  flex: 1;
  padding: 20px;
  background-color: #ffffff; /* 更加干净的背景 */
  overflow-y: auto;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1); /* 内阴影效果 */
  border-radius: 8px; /* 圆角效果 */
}

.el-menu {
  border: none; /* 去掉默认边框 */
}

.el-menu-item,
.el-sub-menu {
  margin-bottom: 12px; /* 增加菜单项之间的间隔 */
  border-radius: 4px; /* 菜单项圆角 */
  transition: background-color 0.3s ease; /* 背景颜色渐变 */
}

.el-menu-item:hover,
.el-sub-menu:hover {
  background-color: rgba(255, 255, 255, 0.2); /* 鼠标悬停时的背景颜色 */
}

.el-menu-item i,
.el-sub-menu i {
  margin-right: 12px; /* 图标与文本之间的间距 */
  font-size: 20px; /* 图标大小 */
  transition: transform 0.3s ease; /* 图标动画效果 */
}

.el-menu-item:hover i,
.el-sub-menu:hover i {
  transform: scale(1.2); /* 鼠标悬停时图标放大 */
}

.active-icon {
  color: #ffd04b; /* 选中图标的颜色 */
}

.active-text {
  color: #ffd04b; /* 选中文字的颜色 */
  font-weight: bold; /* 加粗选中文字 */
}

/* 响应式设计 */
@media (max-width: 768px) {
  #home {
    flex-direction: column; /* 在小屏幕上垂直排列 */
  }
  .left {
    width: 100%; /* 菜单宽度100% */
    height: auto; /* 高度自适应 */
    box-shadow: none; /* 去掉阴影 */
  }
  .right {
    width: 100%; /* 右侧区域宽度100% */
    height: auto; /* 高度自适应 */
  }
}
</style>
